<template>
    <div v-show="show">
        <div v-show="!show1" id="nul">
            <code>还没有选项，先新建一个吧</code>
        </div>
        <group title="命名重复只会保存第一个" v-show="show1">
        <cell :title="n" @touchend.native="showPlugin(i)" :key="i"  v-for = '(n,i) in numList'>
            <x-icon type="ios-close-outline" size="40" class="cell-x-icon" @touchend.stop="console(i)"></x-icon>
        </cell>
        </group>
        <div style="padding:15px;">
            <flexbox >
            <flexbox-item>
                <x-button  type="primary" style="border-radius:99px;" @touchend.native="add">新增</x-button>
            </flexbox-item>
            <!-- <flexbox-item>
                <x-button  type="primary" plain style="border-radius:99px;" @click.native="btnClick">保存</x-button>
            </flexbox-item> -->
            </flexbox>
        </div>
        
        
    </div>
    </template>
    
    
    
    <script>
    import {  XButton , CheckIcon ,Group, Cell ,Flexbox, FlexboxItem,} from 'vux'
    export default {
    components: {
        XButton,CheckIcon,Group, Cell ,Flexbox, FlexboxItem,
    },
    data () {
        return {
            numList:[],
            demo2:true,
            show:false,    // 请求回来设置true
            show1:true,    // 数组为空
        }
    },
    methods: {
        // 点击删除选项
        console(e){
            const _this = this;
            var msg = _this.numList[e];     // 删除内容
            this.$vux.confirm.show({
                title: '确定删除吗？',
                content:  msg,
                onConfirm () {
                    _this.numList.splice(e,1);
                    _this.loadNull();
                    _this.ajax('/daily/item/del',{msg:msg});
                }
            })
        },
        // 点击修改签到名
        showPlugin(e) {
            const _this = this;
            var msg1 = _this.numList[e];    //更改前内容
            this.$vux.confirm.prompt('不能为空', {
                title: '更改签到名',
                onShow () {
                    _this.$vux.confirm.setInputValue(msg1)
                },
                onHide () {
                    // console.log('弹窗消失');
                },
                onCancel () {
                    // console.log('取消')
                },
                onConfirm (msg) {
                    msg = msg.trim().substring(0,15);   // 防止不输入
                    if(msg&&(msg1!==msg)){
                        // _this.numList.splice(e, 1, msg);
                        _this.ajax('/daily/item/update',{msg1:msg1,msg2:msg,});
                    }else{
                        _this.$vux.toast.text("内容无效");
                    }
                }
            });
        },
        // 新增
        add(){
            if(this.numList.length>9){
                this.$vux.toast.text("最多10个选项");
                return;
            }
            const _this = this;
            this.$vux.confirm.prompt('选项'+(_this.numList.length+1), {
                title: '新增选项',
                onConfirm (msg) {
                    msg = msg.trim().substring(0,15);   // 防止不输入
                    if(msg){
                        _this.ajax('/daily/item/add',{msg:msg});
                    }else{
                        _this.$vux.toast.text("内容无效");
                    }
                }
            })
        },
        // 请求列表
        load(){
            $.get("/daily/save")
            .done(res=>{
                this.show = true;
                if(res.data){
                    this.numList = res.data.arr;
                }else{
                    this.numList = [];
                }
            })
            .fail(err=>{
                this.$vux.toast.text("请刷新重试");
            })
            .always(()=>{
                this.loadNull();
            })
        },
        // 判断数组为空
        loadNull(){
            if(this.numList.length>0){
                this.show1 = true;
            }else{
                this.show1 = false;
            }
        },
        // 点击保存
        ajax(url,data,type){
            var type = type || 'post';
            $.ajax({
                url:url,
                type:type,
                data:data
            })
            .done(data=>{
                // console.log(data);
                if(data.err){
                    this.$vux.toast.text(data.msg);
                }
                this.load();
                
            })
            .fail(err=>{
                console.log(err)
            })
        },
        btnClick(){
            var a = JSON.stringify(this.numList);
            $.post('/daily/save',{a})
            .done(data=>{
                console.log(data)
                if(!data.err){
                    this.load();
                }
            })
            .fail(err=>{
                console.log(err)
            })
        }
    },
    beforeCreate:function(){
        // this.$store.dispatch("isLogin");
    },
    mounted(){
        // console.log("进入是否执行1")
    },
    activated(){
        this.$emit('title','新 建');
        this.load();
    },
    deactivated(){
        // console.log("组件被暂时关闭");
        this.$vux.confirm.hide();
    },
    beforeDestroy(){
        console.log("要销毁啦")
    }
}
</script>
<style scoped>
.cell-x-icon {
    fill: #F70968;
}
#nul{
    width: 100%;
    height: 125px;
    line-height: 125px;
    text-align: center;

}
</style>